<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #outer{
        width: 1000px;
        height: 500px;
        border: 1px dashed rgb(186, 183, 183);
        margin: 0 auto;
        display: flex;
        flex-direction:column;
    }
    #banner{
        width: 100%;
        height: 50px;
        display: flex;
        flex-direction: row;
        justify-content:space-around;
    }
    #banner p{
        color: grey;
        font-size: smaller;
    }
    .music{
        display: flex;
        justify-content: space-around;
    }
    .music div{
        width:20%;
        text-align: center;
        font-size:14px;
        line-height: 50px ;
    }
    /* .inner{
        width: 100%;
        height: 90px;
        display: flex;
        flex-direction: row;
        justify-content:space-around;
    }
    .inner div{
        width: 20%;
        text-align: center;
    }
    .inner div img{
        width:50%;
    } */

</style>
<body>
    <div id="outer">
        <div id="banner">
            <p>序号</p>
            <p>歌曲</p>
            <p>歌手</p>
            <p>类型</p>
            <p>时长</p>
        </div>
        <!-- <div class="inner">
            <div>1</div>
            <div>谁的眼泪在飞</div>
            <div><img src="./img/大象.png" alt="大象"></div>
            <div>纯音乐</div>
            <div>4:30</div>
        </div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div> -->
    </div>
</body>
<script>
    let con=document.querySelector("#outer");
    //打开Powershell的命令，在当前目录，按住shift键，点击鼠标右键，打开powershell
    /**
     * 1.npm install http-server -g
     * 2.执行命令 http-server，敲击回车
     * 3.访问页面
     */
    fetch("./data.json").then(response=>response.json())
    .then((data)=>{
        let musicList=data.musicList;
        for(let i=0;i<musicList.length;i++){
             let musicObj=musicList[i];
             let musicCon=document.createElement("div");
             musicCon.className="music";
             for(var key in musicObj){
                let childCon=document.createElement("div");
                childCon.innerHTML=musicObj[key];
                musicCon.appendChild(childCon);
             }
             con.appendChild(musicCon);
        }
    })
    /**
     * 前后端分离的Web应用
     * 页面是服务端程序返回的
     * 浏览器解析网页，fetch来发起网络请求，获取列表数据
    */
</script>
</html>